<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>查看日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10">批量删除</el-button>
            <el-select placeholder="设备状态" value="离线" class="handle-select mr10">
                <el-option key="1" label="在线" value="在线"></el-option>
                <el-option key="2" label="离线" value="离线"></el-option>
            </el-select>
            <el-input placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search">搜索</el-button>
        </div>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="日志ID" sortable width="120">
            </el-table-column>
            <el-table-column prop="time" label="发生时间" width="180">
            </el-table-column>
            <el-table-column prop="level" label="日志等级" width="120">
            </el-table-column>
            <el-table-column prop="msg" label="日志信息" >
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small">编辑</el-button>
                    <el-button size="small" type="danger" @click="delete_row(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination layout="prev, pager, next" :total="100">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            cur_page: 1,
            loading: true
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            this.$axios.get('/api/log').then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                }
                else if(res.data.code == 2)//未登录
                {
                    localStorage.removeItem('user');
                    this.$message({
                        message: '登录已过时，请重新登录',
                        type: 'warning'
                    });
                    this.$router.push('/login')
                }
            });
            this.loading = false;
        },
        delete_row(row){
            this.$axios.delete('/api/device/'+row.id).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        message: '删除设备成功',
                        type: 'success'
                    });
                }
                else if(res.data.code == 2)//未登录
                {
                    localStorage.removeItem('user');
                    this.$router.push('/login')
                }
            });
            this.getData();

        }
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
</style>